<template>
    <header class="pos-icon flex-center">
        <n-icon :size="iconSize" :color="iconColor" class="icon">
            <CameraOutline title="生成图片" @click="openModel" />
        </n-icon>
        <n-icon :size="iconSize" :color="iconColor" class="icon">
            <HomeOutline title="返回首页" @click="goBack"  />
        </n-icon>
    </header>
    <!-- 弹窗 -->
    <n-modal
        v-model:show="showModal"
        class="custom-card"
        preset="card"
        :style="bodyStyle"
        title="生成图片"
        size="huge"
        :bordered="false"
        :segmented="segmented"
    >
        <template #header-extra>
            <a :href="canvasImg" :download="downloadName"> 下载 </a>
        </template>
        
        <n-image
        show-toolbar-tooltip
        width="500"
        :src="canvasImg"
        />
    </n-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { HomeOutline, CameraOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'
import html2canvas from 'html2canvas'

const router = useRouter();
defineProps({
    downloadName: {
        type: String,
        default: "图片下载"
    },
    iconSize: {
        type: Number,
        default: 20
    },
    iconColor: {
        type: String,
        default: "#ffffff"
    }
})

let canvasDom = ref()
let canvasImg = ref<string | undefined>("")
const showModal = ref(false)
const bodyStyle = reactive({ width: '600px' })
const segmented = reactive({
    content: 'soft',
    footer: 'soft'
})
const openModel = () => { 
    showModal.value = true;
    canvasDom.value = document.getElementById('canvasDom')!;
    html2canvas(canvasDom.value, {
        dpi: 300, // 解决生产图片模糊
        useCORS: true,
        allowTaint: false,
        logging: false,
        scale: 2,
        windowHeight: window.innerHeight || 1080
    }).then((canvas) => {
        canvasImg.value = canvas.toDataURL('image/png')
    }).catch(() => {})
}
const goBack = () => { router.push('/') }
</script>

<style scoped>
.pos-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}
.icon {
    margin-right: 20px;
    cursor: pointer;
}
</style>
  